<template>
    <div style="margin-left: 20px;margin-right: 20px;margin-top: 20px;background-color: #EEEEEE; padding:5px; display: flex;justify-content: space-between; ">
        <div style="align-self: flex-start;" class="title">
            <div class="iconfont icon-liebiao" style="font-size: 20px;"></div>
            <div style="margin-left: 5px;"><slot name="soltTitle"></slot></div>
        </div>
        <div style="align-self: flex-end;"><slot name="slotBts"></slot></div>        
    </div>
    <div class="serchInner">
        <slot name="serchInner"></slot>
    </div>

    <div style="padding: 20px;">

        <el-table
            ref="multipleTable"
            @selection-change="selectionLineChangeHandle" 
            :data="props.tbdata"
            stripe
            style="width: 100%">        
            <el-table-column
            type="selection"
            width="55">
            </el-table-column>
            <template v-for="(item,index) in props.tbcols" :key="index">
                <el-table-column
                    :align="item.align"
                    :prop="item.prop"
                    :label="item.label"
                    :width="item.width"
                    >
                </el-table-column>
            </template>
            <slot name="tbColSlot" :row="item"></slot>
            
        </el-table>

        <el-pagination style="margin-top: 10px;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="props.Pagination.PageIndex"
        :page-sizes="[10, 30, 50, 100]"
        :page-size="props.Pagination.PageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="props.Pagination.TotalCount">
        </el-pagination>
    </div>
    
</template>
<script lang="ts" setup name="pager">
import {onMounted,ref,reactive} from 'vue'

let props = defineProps(['tbcols','tbdata','Pagination','reloadPagerData']);
//==========分页模块开始============//
const handleSizeChange = (val) =>{
    props.Pagination.PageSize=val;
    props.reloadPagerData(props.Pagination);
    //alert(`每页 ${val} 条`);
}
const handleCurrentChange = (val) =>{
    props.Pagination.PageIndex = val;
    props.reloadPagerData(props.Pagination);
    //alert(`当前第 ${val} 页`);
}

//==========分页模块结束============//

//=========表格操作==========//
let dataonLineListSelections = reactive([]);
//表格的Change事件
const selectionLineChangeHandle= (val)=>{
    dataonLineListSelections.splice(0,dataonLineListSelections.length);
    dataonLineListSelections.push(...val);
}
//=========表格操作结束==========//
defineExpose({dataonLineListSelections});

</script>
<style scoped>
.serchInner{
    padding-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
    border:1px solid #ccc;
    margin-left: 20px;
    margin-right: 20px;
}
.title{
    display: flex;
    padding: 3px;
    padding-left: 5px;
    padding-right: 5px;
    border-bottom: 1px solid #999;
    margin-left: 10px;
}
</style>